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Topic 

APPLiCATION DESiGN 

Class 

Description 

We start by de-constructing advanced app creation into 
sequentiai process eiements. Kids create the first real-worid app 
using code and design to gain creation confidence. 

Class 

ADV-T 

Class time 

45 mins 

Goal 

• Understand the process of creating real world apps 

Resources 

Required 

• Tips for Teachers 

o If the student seems quick you can ask the kid to 
switch to TEXT MODE. 

o Invite Parents in the class to showcase the products. 

• Teacher Resources 

o Code.org login: It is advisable for teachers to create 2 
dummy gmail ids of their choice beforehand and 
share the same with trial class students for smooth 
code.org login 

o Earphones with Mic 
o Notepad and Pen 

o Teacher Activitv 3 -APPETIZE OR USE YOUR PHONE 

The teacher is expected to Signup using her gmail and 
expected to go through the Teacher Reference 1 

Youtube Tutorial. She should create Appetize links for all 
apps from Teacher Activity 2 and 3 to share with the 
students via Chat after Student Activity 2. 

*Note:If Appetize doesn't work instali the apps in your phone and 
showcase them on your phone via webcam 

O Teacher Reference 1 -YOUTUBE TUTORIAL 

The teacher can Refer to this tutorial and generate 
APPETIZE LINKS for trial students. This is one time job 
as links once generated don't expire and can be used for 
all trial classes. 

• Student Resources 

o Code.org login 
o Earphones with Mic (Optional) 
o Notepad and Pen 
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Class structure 

Warm Up 

Teacher-Led Activity 

Student-Led Activity 

Wrap-Up 

5 Mins 

17 Mins 

15 Mins 

8 Mins 

Start the video call from H2H 

Class Steps 

Say 

Do 


Ask the student to get into Fullscreer 

mode. 


step 1: 

Warm up 
(5 minutes) 


. May I know your 


Hi, my name is_ 
name? 


I would like you to call your parents to 
join in as this is your first class. 

<Say to the Parent> 

Hello, I am <Teacher Name>, 

It would be great if you can also join 
the class to understand the class 
format we follow, I will also be 
presenting the course structure and 
student outcomes which will help you 
know what exactly we offer. 

Today we will learn to make a basic 
mobile app. 

What do you typically do using your 
parents phone? 


Yeah! You are using many apps on 
the phone. 

For example: Camera is an app, which 
lets you take pictures. 


INVITE THE PARENTS TO 
THE CLASS. 


Encourage students to share 
examples. Sample Answer: 
Youtube video, Games, 
Music, Click pictures 
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Music is an app which lets you play 
music. 

We create APRS for a purpose. 

Today, we will create an app to 
change the color of a screen when a 
button is pressed. 


step 2: 

Our big goal is APP CREATION. 


Teacher 

There are 4 steps we will follow to do 


Activity 1 

this. 


(10 minutes) 



Step 1: Define a Purpose: What the 

Click this icon in the bottom 


app should do. 

left of the screen. This is the 
Chat Window. 


Step 2: Design the App: We select 

Copy Paste the following 


the design components we want in our 

lines one by one into the 


app. 

Chat Window (if you copy 
paste all the four steps 


Step 3: Code the App: Use required 

together, they will be sent as 


code blocks. 

a paragraph): 

Step 1: Define a Purpose: 


Step 4: Run the App: 

What the app should do. 


Run the app and check if it works. 

Now, let's discuss these steps for the 
app that we want to create right now. 

Step 2: Design the App: 

We select the design 
components we want in our 
app 

Step 3: Code the App: 

Use required code blocks 

Step 4: Run the App: 

Run the app and check if it 
works 
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step 1:Define a Purpose: 

lEr What did we say is our purpose 
for the app? 

When I click the button the color 
of the screen should change to my 
favorite colour “green”. 


Encourage the student to 
reply with the purpose of the 
app. 


Which means: 

A: When I click the button 
B: Color of the screen should 
change to green. 


Now can you give me some 
examples of things that work by the 
click or press of a button? 




To switch on/off a light, we press 
a switch button. Similarly, for TV 
switch on off, we use the power button 
on Remote/TV 


Encourage the student to 
respond. 


So, Step 1 is now complete. 

I will share my screen and show you 
the rest. 


Teacher Initiates Screen Share 


• When you open the Activity link, it will prompt for sign-in. 

• After login, press 


Create New 


in the top menu bar. 


Teacher Activity 1: APP LAB 

Go to Design Mode on top 
left. 
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step 2: “Design the App 

Choose the design elements we want.” 

This is our design environment. 


Design Mode 


Code 


Design 


Data 


Explain panels as shown in 
the image below. 

• Mobile Screen 

• Design Toolbox 


Mobile Simulator 

This shows what you will 
see on your mobile 
screen when you run the 
app 


Design Toolbox 

AIL the app design 
components are here to 
drag and drop on the 
mobile screen 



k Run 


O' Design Tra 

box 4^ 

Drgg the okjmpn 

into- y wr ppp! 

( BuM-.nn “j 

CIZZI 

Byttoni 

TextInpuT 

abc 

1 ■ 

L^t\ 

Dropdtfiwn 

* 1 

O 1 

r « 

f □ 

Dutton 

Checkbox 

!^' 

Q 

Image 

Canvas. 

n 


ui 

1 - 1 

Screer\ 

■^axt Arw 

liU. 


Chort 

Slider 


Click oni 5 ni or choose it from t-nBi it 

P<50PERTtES EVENTS 


backarojnd color 


tmri^ _ 


j Choose. 


The design elements we will use are 

SCREEN and BUTTON. 
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We already have a screen which we 
will use. 

Let’s set a theme for our Screen. 

Themes are prebuilt design templates 
that get applied to your screen. 

Now from the DESIGN TOOLBOX, I 
will select and drag BUTTON and drop 
it into the MOBILE SCREEN. 


Click on Screen 


Drag Button on Screen. 


Let's Design The Screen 


1. Toggle to ‘Design’ 


Code 


Design 


and click on Screenl. 



2. On the right, in the Properties section, select any THEME of your choice. 


PROPERTIES 

id 


EVENTS 


screenl 




theme 


Area 51 

4 . 

V 

d 

background color 


#362f49 


image 





Choose. 
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Output with Theme applied on the Screen: 
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Now let's add Elements on Screen. 

^^otoDe^gn^ModeJ 



O' Design T&olbox 


Drag the elements into y*ur epp! 


screeni 


2 . Drag Dutton 



Bu^n J 


y Button 

T&xt Input 

' abc 

1- ■ 

Label 

Dropdown 

® 

er 

O 

□ 

■Radio Button 

Checkbox 


Q 

Image 

n 

Canvas 

U 

£cr*&n 

Toxt Area 

liU 

til 

Chart 

Slider 


Workspace 


Click on an element or ohoose it From the dropdown bek 
PROPERTIES EVENTS 



text 


I Button 


wtdth Cpx) 

I m 


height Cpj() 
I so 


it position (pst5 
I I^S 

y position (pxj 
I 325 

text color 

I 

background co3or 


fllabcBcr 


► Run 


font size ^px> 

I 14 

text alignment 
center 


You can change the text of the button in the Properties section. 

PROPERTIES EVENTS 
id 


buttonl 




text 


Click Me! 
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Now we will discuss the 3rd step 
which is to Code the App. 

We will use code blocks to code our 
app. 

The Computer Language we are using 
to make this app is called 

JAVASCRIPT. 


This programming language is used to 
build apps and websites. Nearly 99% 
of all internet websites use 

Javascript. 


This is what our CODING 
ENVIRONMENT looks like. 


Go to to Code Mode 


Code 


Design | Data 


Explain panels as shown in 
the image below: 

• ToolBox 

• Workspace 
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! Data ' 

I XErcRnl 


► Run 


D 


Toolbox Panel 

All the code blocks 
required to write the 
code are here 


I 



I Canvaa 
I llirtle 
I Contnol I Math 

I | Fynction^ 

□r.Evflnt ( : n ^ • t jipfl f ca J. ll 
Sutton t L d, ' I 

LextlnpuLlJ.dj text.) | 
te]^7.Late■l^JLd, teai.) j 


Workspace 

Area where you drag 
and put code blocks 
to write code 


I 


0 Vvralon Htetory <i> Show Text 


flroprtovm ^ 5d J -aptlrinijp nr.nj ^ 
■^atTes^t t-d) I 
satTexc ( Id* ■ ca?f. j | 

^ J.d3. ' 

setU'^bcclidj. r.Linbe£]| | 
cKiCclcb^xiid^ . =h.cc 5 ced^ 
radloa-Jtt-ijn 
■jatCheciifraH ' 
aatChecK.fr3^ Id* chee ttjed> . 
inagc ( L df • -jxl ^ 
gEiZnjge'Jltl -j id ^ 

SEtZI 5 Jge■_■RL^ ! 
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Now there are 2 ways in which we can 
write our program or code. 

1. Block Based Coding: In this 
type of coding the commands 
are already present in the form 
of blocks. You just have to drag 
and drop these commands.This 
is an easier and faster way to 
code. 

2. Text Based Coding: In this 
type of coding, you have to type 
the commands. This is how 
most programmers program - 
by typing the program. 

In this course we will be learning both 
the methods of coding. 

We will start with block coding and 
then when you feel confident we can 
switch to text so that you can code like 
professional programmers. 

Let me show you how we can switch 
between Block Mode and Text mode. 

I am going to first code in blocks and 
then in text. 




Select required code blocks 
from the TOOLBOX PANEL 
and drag them into the 
WORKSPACE area. 

To see the full list of all 
events, scroll in the Toolbox 

area. 
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Drag the onEvent block. 
Drag the setProperty block. 




LGoto Code Mode 


iDe^i^n 


I Stream 


JC 14a, y: 34 
id: screen! 


► Run 


0 Tool box ^ 

Ul controFs 

1 Canvas 

Dati} 

1 Turtle 

1 Control 

1 Math 

Variables 

1 Functions 


0 VQiHian Histofy 


□nEvient I, t "bu.tt.onl" 


image ( id, url ) | 


getKPosition ( id .S 

aetScreen ( acifeej^rdl | 
rgbjr, g, b, af •- i 


n {event j 

r '^backgro^ir.d-cplor'" f t "green'‘1) ; | 


getlmageLTRL £ id> . 
setlmageURL ( Id^ iii;l J J 
play Sound ( ux I , l^tip > 
atDpSound( u s 1 } ^ j 
£!n.owEleinent (idjij 
iiidaSlamerLt [ id !i 
deieteEiement [id) 
set Posit ion £ id J, y, w idths 
aetsizefid, Kidtii, height) | 
setProperty£ idj propertyi va. 
getProperty[ Id, property) 
write( text ) ! 



2.Drag and fit 
onEvent block 
setProperty block 


I 


Scroll Up Down 


I 


3Xhange the Parameters 


Based on our purpose, 

A: When I click the button 

B: Color of the screen should change 

to green. 

For a computer to understand it, we 
need to translate the purpose of the 
app into computer code. 

“When” in english translates into 
“OnEvent” in coding language. 

“Change” in english translates into 
“SetProperty” in coding language. 
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G>de the app: English to Computer Language 

English Language : When Button is Clicked 


Computer 

Language 


UUl 


GnEvent [ T "buttonl” , function ( } ( 




Jl; 


English Language : Change Screen Color to 


Green 


Computer 

Language 


MJ 


seLProperty ( t "'screenl" ▼ '^background-color'^ j green" ) ; ' 


So, we have dragged exactly these 
two code blocks. 

Now, let's set proper values in the 
blocks. 


Drop Down List 


onEvent 




setPri 


▼J’id", 

"buttonl 

'’screen! 


J 


'"click”. 

function{ event ) { 

'id", ▼"width”, ▼100); I 
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onEvent ( ▼ "buttonl" , ▼"click", function ( [event) ) { 


^setProperty ( ▼ "screenl" , ▼ "background-color" , ▼ "green"!) ; J 


J); 



“When I click the button” 

Now reads as 

“onEvent, buttonl is click” 

“Change color of the screen to green” 
now reads as 

“setProperty to screenl 
background-color to green” 

Change the values of 
parameters from the 
drop-down list as shown in 
the screenshots below. 


We are done with Step 3 which is the 
coding part. 

Now we will do the fourth and the final 
step - Run the App. 

Click on 


Step 4: Run the App 

Now, 1 will click the BUTTON on 
screen to see if it works. 

Press the Button on the 
mobile screen to see the 
code working. 
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0 V^iOn Hktory 


I DaLa ] 


Ul icantrols | Canvas 

\ Data I Untie 

I Control: I Math 

I Variables | Functions 

on;£v 0 n.r [id, t^pe, callbac:<ci J 

b^ittoci ( teat) I 
tsKtInpuc [idj. teKtj | 
t.eKL.Label [Id, tear.] J 

ij F&piji;i>if n [ j, ^ j, qpt jprtl r ' gtc ] :d 
g-eLTent (id| j 
£.etT0K.v C id# teat} { 

g0r.'HLLmbeE £id)- J 


qnEvent i| ^ ^ T"qlick"^ ft u-nctio: 

I afctPrope i; t y f T " a c rssfi L" , t " bactgfroiitid-cd Lo 




T "ajjfcfcci’ 


'll} 


P 


► Run 


n 


£ 0tHimfaer [Id, r/jjnb0r) J 

Gbec)tboK. ( id , Gl:eci.0d] | 
radioBucCan tidi checI^E d) 
getChEcked [Id] j 
£ 0 tChecked (id, cl". 0 cked) | 

■j » —--^ 

image [id^ j 

setTma g eURL ( idj url ] j 


4Xlick Run and Click the 
Button 


© 2020 - WhiteHat Education Technology Private Limited. 

Note: This document is the original copyright of WhiteHat Education Technology Private Limited. 
Please don't share, download or copy this file without permission. 


16 



































WhHeHatJr 

Live online Coding for Kids 



© 2020 - WhiteHat Education Technology Private Limited. 

Note: This document is the original copyright of WhiteHat Education Technology Private Limited. 

Please don't share, download or copy this file without permission. 

17 










WhHeHatJr 

Live online Coding for Kids 


You see as I am typing, the code 
shows me options. This feature is 
called autocomplete. This helps 
programmers to program faster. You 
can press the down arrow key to 
choose from the options. 


Workspace: 


/' 1 onE| 

onEvent UI controls 


Type the same code. 

onEvent("button1", "click", 
function() { 
setProperty("screen1", 
"background-color", 
"green"); 

}); 


Since textmode is more strict than 
block mode you have to follow the 
rules of the javascript language. 


See here - the yellow triangles indicate 
a warning. Here it is showing the 
warning because we did not put a 
semicolon. 


Point to the Yellow triangle. 


A semicolon tells the computer that 
the code line ends here as the 
computer executes the code line by 
line. 


Exactly like how a period or a full stop 
indicates the end of a sentence in 
english language, similarly even 
computer languages have grammar 
rules which are called Syntax. 

We will learn more of this in detail as 
the course progresses. 
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Okay now lets run and see if the app 
works. 

Did it work? What colour did the 
mobile screen turn into? 

Green? 

Yes! It worked. 

Click Run and press Button 
on the mobile screen to see 
the code working. 


I'- onEvent( "buttonl ", "click" , function(){ 

2 setProperty( "screenl" , "background-color" , "green" ); 

3 });| 


Let me explain the code to you again. 

In coding “Function” means “do this”. It 
is a way of telling the computer to do 
something. 

So 

OnEvent means When 

Function means Do this 
setProperty means Change. 

This code in text form reads exactly 
what our purpose is - 
When button 1 is clicked Do This. 
Change screenl background-color to 
green. 



Teacher Stops Screen Share 


Now, please do all this at your end and 
change the colour of a screen to one 
of the following colors - Red, or Blue or 
Yellow. 
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Key points to remember: 

What was our PURPOSE? 

When the button is clicked, change 
screen colour. 

How to DESIGN? 

Drag and drop the button on screen 

What is our CODE?; 

When buttoni is clicked; change 
screeni background-coior to 
COLOR 

Now reads as: 

“onEvent, buttoni ciick” 

“setProperty, screeni 
background-coior green” 

Finally Run to see it work 

Now it’s your turn. 


• Ask the student to press ESC key to come back to panel 

• Guide the student to start Screen Share 

• Teacher gets into Fuiiscreen 


Step 3: 

In the Student Panel, click the link for 

Student Activity 1 - APP LAB 

Student ied 

Activity 1. 


Activity 

(10 minutes) 

Use the email and password 1 shared 

It will prompt for sign-in 


with you in the chat window to login. 



Also open Student Activity 2 for 
Reference. 

Copy Paste the Login and 
Password in the chat 



window. 


i want you to code in biock mode 
for now as this is your first class 
and as we progress we will learn to 
code in text. 

Student Activity 2 - CODE 

DIAGRAM 
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Let the student code in 
Block mode only. 

As the student does the 
activity, use encouraging 
remarks like “Great”, “You 
are doing good” “Good Job”. 

Student has to repeat all 4 
steps and do the entire 
activity with their selected 
colour 

Guide the student as 
required using the steps 
above. 


Great Job! Now that you have built an 
app, give it a name and Share it. 

Click Rename and name your project. 
Give it a special name as this is the 
first app that you have created. 

Click Share to share your project. 


I.Rename 


2.Share 


Copy the project link and paste it in the 
Project Link Field on the student 
panel and click Submit Button. 
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This app is not downioaded. To 
convert this app into a 
downloadable app we need to 
perform a few more steps which 
you will learn later in this course. 

However, the iink of your app wiii 
be shared with your parents via 
emaii. 


Don't forget to open the link on any 
mobile to see how it appears. 


Excellent! Your app is working. 


Click on Student Activity 3 to see the 
many apps created by other students 
published on Play Store. 


Let the student see the 
playstore list of published 
apps. 


I am going to share 2 apps links via 
chat. You can checkout these apps in 
your browser. 

Can you open your chat and click on 
the links? 

I will give a short Description about the 
apps: 

Along the course you will learn how to 
make advanced apps to be published 
on google play store and apple app 
store. 


Pager Chat App.apk 


To get the kid excited 
SHARE the 2 Appetize links 
with the student via chat to 
get the students checkout 2 
apps. 

1. Pager Chat App 

2. Sun-Earth Simulation 

*Note: Only one Appetize 
link should be opened at one 
time. 

*Note:lf Appetize doesn't 
work install the apps in 
your phone and showcase 
them on your phone via 
webcam 
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This app is like whatsapp which lets 
you chat with your friends anywhere in 
the world. 

Teacher Reference 1- 

Youtube Tutorial to create 

appetize links 

Student Activitv 3 - 
PLAYSTORE +APPETIZE 

LINKS 

INVITE THE PARENT TO 

SEE 

1 = Sun-Earth System.apk 

A Space Tech App like this one is an 
accurate simulation of the sun and 
earth system. You will see the sun is 

150 Million km from earth and 
therefore earth takes 365 days to 
complete one revolution. 

Move the earth using your cursor and 
you can calculate the days it would 
take for one complete revolution. 


Not just apps, let me show you 

Chatbots with Artificial Intelligence (Al) 
created by students for themselves 

Can you click on Student Activity 4? 

Student Activitv 4-CHATBOT 

INVITE THE PARENT TO 

SEE 

Prompt the student to type a 
few questions on the chatbot 
For example: Which sports 
do you like? 


In this course we will learn to make 

circuits like the ones used in mars 
rover and other space robots. You will 
learn the basic electronics of 

microcontrollers like Arduino and how 
to control these chips with code using 
C++ language. 

Here is a quick video creating an 
internal circuit of any robot. 

Student Activitv 5-ROVER 

CIRCUIT SIMULATION 

INVITE THE PARENT TO 

SEE. 
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As you can see in the video we will 
learn to add different components to 
our robot or rover and connect them to 
the arduino chip and code. 

Imagine you need to pick up soil from 
the surface of planet mars to study it. 
Here I am adding 4 motors to control 
the forward and backward movements 
of the rover arm to collect soil 
samples. 



Once the motors are selected you 
need to power them by connecting 
them to the circuit and now the motors 
are connected to circuit. Still they 
won't work. We need to code and 
make them work, so I am going to set 
the motor speed by changing values. 


Now imagine your rover is on mars 
and you are on earth handling the 
rover with a remote how would you 
know what the rover is doing? 


For that you can connect the wireless 
display to your rover remote which 
shows you if the rover arm is moving 
forward or backward. 


Wrap Up 

(8 minutes) 


So, how did you like the class today? 

LuT Can you tell me what are the 4 
steps to build an app successfully? 
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a 

1. Define the purpose of the app. 

2. Design the app. 

3. Code the app. 

4. Run the app to see it working. 


You completed all the activities with 
great creativity and you deserve a 
Hats Off which gives you 10 Points. 

You also get a Hats Off for being well 
behaved in class and 
asking/answering some great question 
which gives you another 10 Points. 

You did really well in class today doing 
all the puzzle challenges with great 
concentration. So you get another 
Hats Off which gives you 10 more 
Points. 


Press the Hats Off Icon for 

Great Persistence 


Great 

Persistence 


Press the Hats Off Icon for 

Great Question 




Press the Hats Off Icon for 

“Strong Concentration..” 



Congratulations! You are among the 
exceptional students who get 3 out of 
3 hats off in the trial class! 

You are really bright and I hope you 
join the full course where you’ll create 
a full entrepreneur ready app which 
thousands across the world may 
download. 


Call parents to join, 
introduce yourseif and 
ceiebrate the kid’s 
accompiishment with the 
parents. 


Let me give you a quick summary of 
what we will be learning in the course. 
Our course follows a Project-based 
learning philosophy where kids apply 
the concepts they learn to build Apps 
throughout the course. Creating apps 
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makes their learning practical instead 
of theoretical. 

Our course is structured into 3 
modules: 

Game Developer Certification: In the 

1st module of 8 classes, your kid will 
become a certified Game Developer. 
Kids build games using core coding 
logic concepts like sequences, 
commands, and loops. This 
dramatically improves their logic and 
concentration. 

App Development Certification: 

After the 2nd module of 48 classes, 
your kid will become among the 
youngest in the world to be a certified 
Android and iOS App Developer. Kids 
learn User Interface and User 
Experience design to create powerful 
front-end app design. Every kid builds 
a professional iOS App Store and 
Android Playstore ready app after this 
module. I will be showcasing some of 
the very best Apps which kids have 
created in as little as 40 hours of 
learning to code on our platform. 

Al + Space Technology: In the 3rd 

module, your kid will become among 
the 1st in the world to learn advanced 
data modeling and Machine Learning, 
using which they’ll create Space Tech 
simulations. Kids reach the peak of 
their creative imagination as they 
apply coding to frontier technologies 
like Space Technology and Driverless 
Cars. Top kids in the course who do 
the best classes and projects get a 
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chance to visit Silicon Valley where 
they meet top Google scientists and 
entrepreneurs. 

During these modules your kid also 
learns contemporary frontend 
programming languages like HTML, 
CSS, Javascript as well as backend 
programming languages like Python. 


Let me show you one of the space 
tech projects built in our course. Can 
you click on Student Activity 6? 

Your kid will learn 3D Space Models 
like 3D Launch Vehicles and 3D 
Satellites, manufactured by Space 
Agencies like NASA, ISRO, SPACEX. 


Student Activity 6-3D 

MODELLING 

INVITE THE PARENT TO 
SEE. 


Can you click on 


e 

View in 30 


Can you see it? 
Great! 


Now, let me show you the App of one 
of our students, Shrey Shah. Shrey 
wanted to facilitate interaction between 
his Parents and teachers as his 
Parents never got the time to interact 
with Teachers due to their hectic work 
schedules. Within 3 months of learning 
to code with Whitehat Jr, Shrey 
created an app which connects 


Student Activity 7 - Shrey 

Shah’s App 

INVITE THE PARENT TO 
SEE 
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Students and teachers in real-time. 
Teachers can share homework with 
the students on the App and Students 
can ask doubts anytime. 

Let me show you the App. 

Can you click on Student Activity 7? 
This App has been featured widely in 
international media. Isn’t it amazing 
that 8 year olds are creating apps like 
these within just 40 hours of learning 
to code! 

During the course your kid will also be 
creating full entrepreneur ready, 
industry grade apps just like Shrey and 
get a chance to visit Silicon Valley and 
meet top Google scientists and 
entrepreneurs. 


Teacher Guides Student/Parent to Stop Screen Share 


To provide you more details about the 
course as well as answer any 
questions that you may have our 
academic counselor will get in touch 
with you. My schedule is almost full 
but I’d love to have your kid as my 
student since your kid is exceptionally 
bright with true entrepreneurship 
potential! 

Congratulations <kid name> again on 
being awarded 3 hats off! You are truly 
exceptional. Hope you had fun. 

Thank you for your time today. Kindly 
stay on the panel and do not close this 
page when I end the class-our entire 
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curriculum along with the details will ADVANCED Curriculum 
be displayed on the panel. Vision is provided below for 

Teacher reference if required 

Student Activity 8-COURSE 

PDF 


Ask the parent to refer to this 
link to know more about the 
ADVANCED curriculum. 


Course Objectives 



ADVANCED 

Grade 4-Grade 5-Grade 6 



JAVASCRIPT PYTHON 3 

TRACK TRACK 

144 Classes 156 Classes 


The Advanced Curriculum is World's First 
Comprehensive Coding Curriculum Crafted for 
kids Age 9+ to pre^re them for Future Digital 
Leadership. Tti^urriculum is focused on: 

1 In^iMUcing Fundamental Coding Concepts 
'^xFds through Block Based Coding with 
davascript 

‘ ? Mastering Web Development Through 
Syntax Programming in CSS HTML and 
Q Javascript 

3. Deepening Algorithmic Thinking with 
Applied Space Technology and Arduino 
Programming with C++ 

4. Specialising in 29+ Industry Grade 
Technologies + Platforms like Artificial 
Intelligence, NLR Realtime 
Database.Machine Learning 

5. Inventing the Digital Future by stretching 
kid's intelligence by having them work at 
frontiers of Technologies like Internet of 
Things(loT}, Blockchain, Self-Driving 
Cars,Quantum Computing. 
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Course Modules 




ADVANCED 

Grade 4-Grade 5-Grade 6 



+ 



JAVASCRIPT PYTHON 3 
TRACK TRACK 

144 156 


Learning Outcomes 


V/ 


ADVANCED 

Grade 4-Grade 5-Grade 6 




JAVASCRIPT PYTHON 3 
TRACK TRACK 

144 156 


I 


The Advanced Course is further divided into 
following 21 Major Modules Leading to highly 
advanced Tech Products covering entire 
Spectrum of Computer Technology 


JAVASCRIPT TRACK 
144 


1. Coding Basics 

2 . Procedural 
Programming 

3. Native App 
Development 

4. Functional 
Programming 

5. Al Chatbots 

6. Cloud AppsIGames ^ 

7. Web DevelopmentN^ 

8. UI/UXDesign X ^ 

9. Space Tech\^ 

10. Natural L^lguage 
ProcesM^^ 

11. NeiWs^l^tworks 

1 2 . Learning 

13. ^M^hine Learning 

14. XI Game 


PYTHON TRACK 
156 


15. Python Applications 

16. Internet of 
Things(loT) 

17. Big Data 

18. Programming 
Self-Driving Cars 

19. Blockchain 

20. Cloud Computing 

21. Quantum 
Computing 



The Advanced Curriculum is World's First I 

Comprehensive Coding Curriculum Crafted for 

kids Age 9+ to prepare them for Digital Future, 

Teaching kids to develop products like: 


JAVASCRIPT TRACK 

PYTHON TRACK 


144 

156 


• Web Apps 

• Python Application 


• Native Apps 

• Machine Learning 


• Cloud Games 

• Self-Driving Cars Logic 


• Space Simulations 

• Cryptocurrency 


• CAD 3D Models 

• BlockChains 


• Advanced Websites 

• Smart Contracts 


• Arduino Circuits 

• Data Visualisation 


• Al Chatbots 

• Cloud Repositories 


• UI/UX Design 

• Cloud Functions 


• Cloud Apps 

• Internet of Things 


• Cloud Databases 

• Smart Devices 


• Artificial Intelligence 

• Quantum Circuits 



• Quantum Programs 
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ADVANCED 

Grade 4-Grade 5-Grade 6 



+ 4 * 


JAVASCRIPT PYTHON 3 
TRACK TRACK 

144 156 


48IFOUNDATION [ Block Based Coding ] 

Kids Start with [earning the basics of Coding while 
developing Animations, Stories, Games, WebApps, 
Native AppaChatbots. 

49-96IEXPLORATION [ Block+Toxt Based Coding ] 

Kids learn Web Programming While Building Websites 
and Sophisticated Industry Grade UI/UX Space Tech 
Apps thus Stretching their Imagination to comprehend 
and Solve Complex Space Problems with Simulations 
and Robotic Rovers 

97-144ISPECIALISATION [ Text Based ^Frameworks I 

Kids Specialise in Artificial Intelligence Concepts and 
their applications through building smart Apps and 
Websites. This prepares them to take on the future 
with confidence in t^e(r creativity. 


145-300|INVENTtON [ Ubraries+Frameworks ] 

Kids learn to^work right at the frontiers of future 
technologic tike Self Driving Cars, Cryptocurrencies, 
Smart CtJOtracts, Internet of Things, Quantum 
Corr^iting transforming them from experimenter to 
inventor digital world of the future. 


81 BASIC 


MODULES 

• Coding Basics 



ADVANCED 

Grade 4-Grade 5-Grade 6 


I JSI 

JAVASCRIPT 

TRACK 

144 


OUTCOMES 

• Web App 

• Art 

• Animation 

• Stories 

• Games 
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48ISTANDARD 



MODULES 

• Procedural Programming Concepts 

• Native App Development 

• Functional Programming Concepts 

• Al Chatbots 

• Cloud Apps|Games 


ADVANCED 

Grade 4-Grade 5-Grade 6 


I JSI 

JAVASCRIPT 

TRACK 

144 





OUTCOMES 

Web Apps|Native Apps|AI Apps 
Communication Apps eg.Chat App 
Health Apps eg.Heath Calculator 
Utility Ap^eg.Passw/ord Generator 
Al C|i^^ts 




ADVANCED 

Grade 4-Grade 5-Grade 6 



JAVASCRIPT 

TRACK 

144 



MODULES 

Front End Development! Bootstrap 
UI/UX Design 
Space Tech 
o Space Simulations 
o Space CAD 3D Design 
o Space Data Analysis 
o Space Robotics 
NLP 

Neural Netw/orks 
Deep Learning 
Machine Learning 
Al Game 

OUTCOMES 

Advanced Websites 
Advanced Blog 
3D Models 

Arduino Circuits & Programming 
Space Simulations 
e-Portfolio Website 
Al Board Game 
Space Data Visualisation 
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300IFR0NTIERS 



ADVANCED 

Grade 4-Grade 5-Grade 6 



PYTHON 3 
TRACK 
156 


MODULES 

• Python Applications 

• Internet of Things(loT) 

• Big Data 

• Programming Self-Driving Cars 

• Blockchain 

• Cloud Computing 

• Quantum Computing 


OUTCOMES 

• Application Softwares 

• Autonoc^us Car Simulations 

• Advaqc^ Data Visualisations 

• AreLfSho Smart Devices 

• ^^art Homes 
^^Cryptocurrency 

Smart Contract 
Cloud Applications 

• Quantum Programs 





X End Class 


Teacher Clicks " 


Additional 

Activity 1 

Okay Great! 

We could successfully change the 
color of the screen when the button is 
pressed. 



What if I want to change the screen 
color to any random color every time 
the button is pressed. 

I will guide you to do the same. 

Ask the student to follow your 
instructions as the student 
makes the following 
changes. 


. ^ , Ul controls , 

1. Go to and 



rgb(r, g, b, a) 

Drag -^ 
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block and drop it at the place 
where you selected color from 
in set Property block. 


2 . 


Now go to 
and drag 


Math 


randoitiNninber { , ) 


and drop it at r in the rgb 

block. 


onEvent ( ▼ "buttonl” , ▼"elide”, function ( ) i 

' setProperty( ▼ "screenl" , ▼"background-color", i 

:gb (^randomNumber iol3l255yii, ^0, ^5^, [^.5) ) ; 

. J);| ^ 

^ IT ,-_ 

1 1 Math 


Ul controls 


Let me explain what we did. 

1 . The rgb block stands for a mix 
of RED+GREEN+BLUE 
shades. The values we put are 
shades of red green blue. The 
last number indicates 
transparency. 

2. The randomNumber lets the 
computer select any number 
within the range you provided. 

In computer every color has 
256 shades so here what we 
did is we let the computer 
choose any shade of red from 0 
to 255 using randomNumber 
block so we get random shade 
of RED everytime we click the 
button. 
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3. We are keeping shades of 
green and blue the same 
default values and also the 
transparency is set default 0.5. 


Additional 


4. Now let’s click Run and click the 
button as many times as 
possible to see what happens. 


Click on 


You are doing great! 


Activity 2 


To make the button look great in your 
app let’s make some design 
modifications to the button. 


^ Run 


Go back to 


Design 


Mode and click 


on the button to see its properties. 


Make the following changes to the 
button properties. 

text 

Click Mel 

1 . -- 

Change the button text to 
Click Me! to make it appealing. 
This will make the user curious 
to press it to see what happens 
when the button is pressed. 


Ask the student to follow your 
instructions as the student 
makes the following 
changes. 


border radius (px) 
20 


Change the border radius to 20. 
This will give your button a 
circular look to make it look 
more advanced when you open 
the app on mobile phone. OR 
You can keep the button square 
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but make sure radius should be 
half of the size of the button. 


3. 


Now click on Run and press 
Button on mobile screen to see 
the code working. 


Click 


^ Run 




► Run 


PROPERTIES EVENTS 


PROPERTIES 

EVENTS 







background color 
mahcBc 


font family_ 

Arial 

font size (px) 

14 

text alignment 
center 

image 

border width (px) 
0 

border color 
#000000 


border radtus CP^> 
20 | 


hidden 

□ 


Choose.. 



X position (px) 


110 

y position (px) 


355 


text color 




background color 


#labc9c 

font family 
Arial 


font size (px) 
14 


You can also make the button 
completely circular by changing the 
border radius to 100 and removing the 
button text. Make sure you set the 
button dimension as a square. 

width (pK) 

40 

hei ght ( px) 

40 
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screeni 



► Run 


PROPERTIES EVENTS 
id 


button! 


text 


width (px) 


40 

height (px) 


40 


background color 
I #S36cea 


font family_ 

' A rial Black ^ 

font size (px) _ 

IS 

text alignment 
center , 

image_ 

I Che 

border width (px) _ 

0 


border color 
#4dS75f 


border radius (px> 
100 


Additional 

Great! 


Activity 3 

Now let's say we want to enhance the 
features of this app. 

Let's say 1 want to change the color of 
the screen to any random every 
second. 

1. First go to Code and locate 

Control o * 

Section. 
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2. Lets drag the 


timedLoop (ms , callback ) J 

function. 

This code block will execute all 
the code blocks we insert into it 
with some time interval. This is 
a kind of a forever loop function 
which runs forever. 

3. So drag the block and let's drop 
it above the set property block. 


onEvent ( ▼ "buttonl” , ▼ "click", ( function (~ 


2 j 

3 I 

4 ! 


5 ; 

I 

6 '1 


timedLoop {[1000]^ | function ( ) { 




jiij 


setProperty ( ▼ "screenl" J, ▼ "background-color" | rgta ( randomWumber 0, 75| 0.5) r:J ) ; 


I ); 



Now let’s drag the set Property block 
inside the timed loop block. 




1 onEvent ( T"buttonl" , ▼ "click", | function{ 


2 


"timedLoop ([1000], [tfunction ( ) { 






3 



setProperty ( ▼ "screenl" , ▼ "background-color" , rgb ( randomNumber I255j) |, 0, 75, 0.5) 1) ; 

4 


} 



5 

.} 


J);| 



When the button is clicked, the timed 
loop block will loop forever or repeat 
forever what is inside this block. 

Since we have the set Property block 
inside the timed loop block the screen 
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color will change randomly every 1000 
milliseconds or 1 second as you know 
1 second = 1000 milliseconds. 

You can change the time interval and 
make it smaller to have rapid color 
change effect. Let’s try and set it to 
100 milliseconds. See what happens. 



1 onEvent ( ▼ "buttonl’S ▼"click”, function O f I 

/ _ - -- - - . .M. 

2 timedLoop( 100 , [ function( ) { 

3 l^etProperty( ▼ "screenl" , ▼"background-color", rgb ( randomNumber gSI I, 0, 75, 0.5) d| ); 

4 J_„_, ^ ...!>'•] 

5 0 ___^_ J);J 


Additional 

Now let's add some animation to this 


Activity 4 

App. What if 1 want the computer to 
draw random shapes on the screen by 
itself as the background color of the 
screen changes? 



1. So let's go to 


Turtle 


and add turtle to our app inside the timed loop. 


This will make the turtle draw randomly on the screen. Turtle is used to draw on 
the screen. 


2. Now add the following code in the timed loop function. So every 100 milliseconds 
or 0.1 seconds or 1/10th of second these 5 blocks will get executed. 
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2 timedLoop ( [100] , function ( ) { 


3 


setProperty ( ▼ "screenl " , ▼ "backgroun 


4 


penColor ( [▼ “red”] ) ;J 


5 


penWidth ( [▼ 3] ) ; 


moveForward ( [▼ 25] ) ; 


7 


turnRight ( randomNumber ( 1 , '50)1) ; — 


8 


1 ); 


• set Property block to change the screen color to random shades of red, green, 
blue. 

• Turtle pencolor block to set the turtle pen color to red. You can change it to any 
color. 

• Turtle Pen or brush width is set to 3 pixels. You can change this as well. 

• Turtle will move forward by 25 pixels: Pixels are little dots of color any computer 
screen or mobile screen is made up of. 

• Turtle will turn right by a random angle between 1 degree to 50 degree, you can 
play around with this range too. 

Also since we are keeping the color and width constant, we can take it out of the timed 
loop to keep it. That's how we make our code accurate. As we want the turtle to move 
forward every 100 milliseconds and turn right between 1 and 50 every milliseconds. 
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Modified Code: 


1 

" - 13” 

onEvent (▼ "buttonl" , ▼"click", function ( ) { 1 

2 

[ 

penColor <[▼ "red"]) 

3 

1 

penWidth {[▼ 3]) ; ^ 

4 


timedLoop ([lOO], j function ( ) { 





5 



setProperty( ▼ "screenl" , ▼ "background-color" 

6 



moveForward ([▼ 25]) ;J 

7 



turnRight ( randomNumber ((!], (5^) |) ; 

8 


} 

> 

J)' 


3. As the Turtle moves on the screen, let’s hide other elements so that we can see 
what shape the turtle is able to draw. 


Go to 


Ul controls 


and use hideElement Function 


9 


hideElement ( ▼ "buttonl” ) ; 

' w -:- 


J 


COMPLETE CODE: 


1 onEvent (▼ "buttonl" , ▼"click", function ( ) { 

2 pe nColor ( ▼ "red" ) ; ] 

3 penWidth ( [▼ 3j ) ; I 

; - _/-^- * _, 

4 I timedLoop (tlOO], [ function ( ) { 


5 setProperty ( ▼ "screenl" , ▼"background-color", rgb ( randomNumber [255]) [, 0, 75, 0.5) Jzlj) ; 

—' " 

6 moveForward( ▼ 25 ); I 

—^- * I 

7 turnRight ( randomNumber ^ | ) ; 

8 > J );| 

- I 

9 I hideElement (▼ "buttonl" ); ] 

10 _> _I ) I 


Wow! You just taught a computer to draw by itseif through Code. 
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Additional Now let's extend the app to make it 

Activity 5 niore interactive. 

Let's set the screen color to the app 
user’s favorite screen color. So we will 
need a text input box where the user 
can type his/her favorite color 

We will also have to add another 
button. This button will be clicked to 
change the background colour 
according to the input from the person. 

Let's go to Design mode and add a 
textinput box to get the user input and 
a button. 


Drag a label and a textinput box. The 
label is used to display some text on 
the app and the textinput box is used 
to type in text. 
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O Design TooEbox 


Drag the elements into your 
appl 


Button ^ 

Button 


abc 

Label 


o 

Radio Button 

(LJ 

Image 


D 


Screen 


;r^ 

Text Input 


Dropdown 

□ 

Checkbox 

Q 

Canvas 


Text Area 





Now let's set the properties of labeH 
and textinputl. 
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screen! 


Enter your Favorite Color 




► Run 


PROPERTIES EVENTS 
id 

lab ell 


text 

Enter your Favorite Color | 

width (px) 

260 

height (px>_ 

2S |dP 

X position (px) 


TpositiorTTp^ 


text color 

#4d575f Ig 

ba ckground color _ 

rgbaCO, 0, 0, 0) | 

font family _ 

Ah a I Black 

font size (px} 

] 


PROPEf?TiES EVENTS 

"^id 

text_ input! 


placeholder 

( _ 

width (px) 

I 200 

height (px) _ 

^0 

X position (px) 

I 60 

y position (px) 

I 90 

text color _ 

I #4d575f I 

background color 
#f2f2f2 

font family_ 

I Aria I i 

font size (px> 

113 


Click Me! 


Click on the 

button and click on the 


Duplicate 


on the right. 

This will create another button exactly 
like the first one. 

Now drag this new button and place it 
on the screen and set its properties as 
shown below. 
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scrcenli 


Enter ymw Favorite Color 




Apply My Fev Color 


► Run 



Remember the id of this button is 

button2. 



Ul controls 

From add another 

onEvent block for this button and 

select button2. 






PROPERTIES EVENTS 





button 2 



text 



y position (px) 


' 330 


text color 

I 

background color 
I #ea53be 

font famify 
I Arial Black 

font size (px) 


15 
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COMPLETE APP CODE 


2 

penColor ([▼ "red"]) ; | 


3 

penWidth ; J 


4 

■ timedLoop {[100], J function ( ) { 






5 


setProperty( ▼ "screenl" , ▼ "background-color 

6 


move Forward {[▼ 25]) ; J 

7 


turnRight { randomNumber ^ [^) |) ; ^ | 

8 

} 

) )' i 


9 

hideElement{ ▼ "labell" ); j 


10 

hideElement ( ▼ "buttoni" ); j 


11 

hideElement ( ▼ "text_input1" ); ] 


12 

hideElement ( ▼ "button2"|) ; ] 


13 J 


)>>-J 


14 onEvent ( T''button2 " 1 t "click", function } { 





1 

setProperty( t" screenl" , t" background-color" , 

16 J 





So here we have added the hideElement function to buttoni event, so that these 
elements hide making space for turtle to draw on the screen. 


hideElement ( ▼ ''labell” ); 
hideElement ( ▼ "buttoni” ) ; 
hideElement( ▼ "text_inputl" ) ; 
hideElement ( ▼ "button2'i) ; 


So when the button2 is clicked, the 
app will get the text from textinput 
block and change the color to the color 
entered by the user in the text input 
block. 

So if the user types “John” in the 
textinput block nothing will happen as 
“John” is not a color. Computer knows 
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all the color names. So once it detects 
the color name it will apply it to the 
screen. 

For example: light green, tomato, 
skyblue, brown, plum. 

Great! 

You can add your name to the app as 
a label, as this app is developed by 
you. So let's go to design and add 
your name in the Label2 text column. 


text 


App Developer John Oof 
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ClJck MnE 


Apply My F« GdlAT 

App Jghr I_-r 

' O Reset 


PROPERTIES EVENTS 

~ld 

Iabel2 ~ ] 

text_ 

I App Developer: John Dof 

width tpK] _ 

I 250 

he ight (px) _ 

(20 I d ' 


K position (px) 



background color 
I rgba(0, 0, 0, O) 


font family 
[ Trebuchet 

fon t size (px) 

\R 
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Activity No. 

Name of the 
Activity 

Link 

Teacher Activity 1 

APR LAB 

https://studio.code.ora/projects/applab/new 

Teacher 

Reference 1 

YOUTUBE 

TUTORIAL 

https://voutu.be/e9lipnnBbtlQ 

Teacher Activity 2 

ANDROID APRS 

https://drive.aooale.com/drive/folders/1plNVpqc 

hKh7EPhq7l3cbfv5DOoC4xsf?usp=sharina 

Teacher Activity 3 

CREATE 

APPETIZE LINKS 

https://appetize.io/ 

Student Activity 1 

APR LAB 

https://studio.code.ora/projects/applab/new 

Student Activity 2 

CODE DIAGRAM 

https://whitehatjrcontent.s3.ap-south-1 .amazon 

aws.com/curriculum/imaae1 G.pna 

Student Activity 3 

PLAYSTORE+APP 
ETIZE LINKS 

https://plav.aooale.com/store/apps/developer7i 

d=WHITEHAT+EDUCATION+TECHNOLOGY 

Student Activity 4 

CHATBOT 

SHOWCASE 

https://bot.dialoaflow.com/82e2fc96-1906-4bd8 

-a9d2-84a17f04ea54 

Student Activity 5 

ROVER CIRCUIT 
SIMULATION 

https://voutu.be/j5tRza11 cAs 

Student Activity 6 

SATELLITE 

LAUNCH VEHICLE 

https://www.tinkercad.com/thinas/lriqDF0nu7A 


Student Activity 7 

SHREY SHAH’S 
APP 

https://voutu.be/hcFhmpJ3ovw 

Student Activity 8 

COURSE PDF 

https://cdnwhjr.s3.ap-south-1.amazonaws.com/ 

website/curriculumpdf/10-dec-2019/ADV-300 

New+Classes.pdf 
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